<template>
	<!--pages/ContactCustomerService/ContactCustomerService.wxml-->
	<view class="container">
		<view class="bg"></view>
	    <!-- <view class="text-style">添加微信客服请保存上方二维码</view>
	    <view class="text-style">或添加微信号my1805537836</view>
	    <image class="contact-image" src="../../static/Contact.jpg" bindtap="saveImage"></image> -->
		<uni-card>
			<view class="easy-input">
				<uni-easyinput type="textarea" autoHeight v-model="form.messageContent" placeholder="请输入内容" :clearable="false"></uni-easyinput>
			</view>
		</uni-card>
		<uni-card>
			<view class="easy-inputNum">
				<uni-easyinput type="number" maxlength="11" autoHeight v-model="form.messagePhone" placeholder="请输入联系电话" :clearable="false"></uni-easyinput>
			</view>
		</uni-card>
		<uni-card>
			<view class="upload-image">
				<uni-file-picker mode="grid" :value="filePathsList" limit="9" title="最多选择9张图片" class="file-picker" :auto-upload="false" @select="handleSelect" @delete="deleteSelect"></uni-file-picker>
			</view>
		</uni-card>
		
		<view class="submit-style">
			<button type="primary" @click="submitForm">提交</button>
		</view>
	</view>
	
</template>

<script>
	
	import {getToken} from "../../apis/myCookie.js"
	import {addMessages} from "../../apis/messages.js"
	
	export default {
		data() {
			return {
				filePathsList: [],
				uploadPathList: [],
				form: {}
			}
		},	
		methods: {
			  async handleSelect(res) {
				 await this.uploadImg(res.tempFilePaths);
				 console.log(this.uploadPathList);
				},
			
			async uploadImg(tempFilePaths) {
			    if (!tempFilePaths.length) return;
			    const path = tempFilePaths.pop();
			    this.filePathsList.push({url:path,name:""})
			    let [err, {data}] = await uni.uploadFile({
			        url: 'http://localhost:8080/common/upload',
			        filePath: path,
			        name: 'file',
			        header: {
			            'Authorization': 'Bearer ' + getToken(),
			            "Content-Type": "multipart/form-data",
			        }
			    });
			    
				data = JSON.parse(data);
				console.log(data)
			    // upload success
			    this.filePathsList[this.filePathsList.length - 1].name = data
				this.uploadPathList.push(data.fileName);
			    this.uploadImg(tempFilePaths);
			},
			deleteSelect(err) {
				const num = this.filePathsList.findIndex(v => v.url === err.tempFilePath);
				this.filePathsList.splice(num, 1);
				this.uploadPathList.splice(num, 1);
			},
			submitForm() {
				this.form.messageImageUrl = this.uploadPathList.join(",");
				addMessages(this.form).then(res =>{
					wx.showToast({
						title:"提交成功",
						icon:"success",
					});
				}) 
			}
		}
	}
</script>

<style>
	.container{
	    padding: 0%;
	}
	.bg{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #f8f8f8;
	}
	.easy-input{
		background-color: #FFFFFF;
		/* font-size: 32rpx; */
	}
	.upload-image{	
		margin-left: 10px;
		background-color: #FFFFFF;
	}
	.file-picker{
		width: 30px;
		/* background-color: ; */
	}
	.submit-style{
		width: 120px;
		height: 20px;
		margin: 20px;
	}
	.contact-image {
	    width: 600rpx;
	    height: 600rpx;
	    padding-top: 100rpx;
	    padding-left: 70rpx;
	}
	.text-style {
	    padding-top: 50rpx;
	    width: 100%;
	    height: 100rpx;
	    /* background-color: azure; */
	    text-align: center;
	}
</style>
